
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>微现场</title>
    <!--首页 main.css-->
    	<link rel="stylesheet" href="css/index.css" media="screen" type="text/css">
    <!--特邀嘉宾css-->
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.0/css/swiper.min.css">
    <!--签到css-->
    	<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
    	<link rel="stylesheet" type="text/css" href="css/siginMainCss.css"/>
    
</head>
<body>
	<div class="g-footer">
		<ul>
			<li>
				<i><img src="img/icon-danmu.png"/></i>
				<span>首页</span>
			</li>
			<li>
				<i><img src="img/icon-danmu.png"/></i>
				<span>特邀嘉宾</span>
			</li>
			<li>
				<i><img src="img/icon-qiandao.png"/></i>
				<span>签到</span>
			</li>
			<li>
				<i><img src="img/icon-danmu.png"/></i>
				<span>弹幕留言</span>
			</li>
			<li class="active">
				<i><img src="img/icon-choujiang.png"/></i>
				<span>抽奖</span>
			</li>
			<li>
				<i><img src="img/icon-choujiang.png "/></i>
				<span>游戏</span>
			</li>
		</ul>
		<!--游戏按钮-->
		<div class="buttonForGame">
			<div class="shakeBtn gameReadyBtn">准备游戏</div>
			<div class="shakeBtn gameStartBtn">开始游戏</div>
			<div class="shakeBtn gameRestartBtn">再来一次</div>
		</div>
	</div>
	
	<div class="g-container">
		<!--首页-->
		<div class="g-cont">
			<div class="bgFixed"><img src="img/banner-bg.jpg"/></div>
		</div>
		<!--特邀嘉宾-->
		<div class="g-cont famousPeople">
			<div class="bgFixed"><video id="bgMov" style="position: absolute; z-index:0; top: 0; left: 0;" width="100%" loop="loop" autoplay="autoplay" src="lottery3d.mp4"></video></div>
			<div class="peopleBox">
				<div class="swiper-container peopleBoxWrapper">
				  <div class="swiper-wrapper">
				    <div class="swiper-slide">
				    	<div class="l">
				    		<img src="img/sasas12a.jpg"/>
				    	</div>
				    	<div class="r">
				    		<h3>特邀嘉宾</h3>
				    		<h4>奥巴马先生</h4>
				    		<p>出生于美国墨西哥，曾任2010美国总统，是美国历史上第一任黑人总统，曾获得诺贝尔和平奖，为世界和平做出贡献。</p>
				    	</div>
				    </div>
				    <div class="swiper-slide">
				    	<div class="l">
				    		<img src="img/timg.jpg"/>
				    	</div>
				    	<div class="r">
				    		<h3>特邀嘉宾</h3>
				    		<h4>奥巴马先生</h4>
				    		<p>出生于美国墨西哥，曾任2010美国总统，是美国历史上第一任黑人总统，曾获得诺贝尔和平奖，为世界和平做出贡献。</p>
				    	</div>
				    </div>
				    <div class="swiper-slide">
				    	<div class="l">
				    		<img src="img/timg.jpg"/>
				    	</div>
				    	<div class="r">
				    		<h3>特邀嘉宾</h3>
				    		<h4>奥巴马先生</h4>
				    		<p>出生于美国墨西哥，曾任2010美国总统，是美国历史上第一任黑人总统，曾获得诺贝尔和平奖，为世界和平做出贡献。</p>
				    	</div>
				    </div>
				  </div>
			      <div class="swiper-button-prev swiper-button-white"></div> <!-- 白色 -->
		    	  <div class="swiper-button-next swiper-button-white"></div> <!-- 白色 -->
				</div>
			</div>   
		</div>
		<!--签到-->
		<div class="g-cont signInBox">
			<div class="bgFixed"><video id="bgMov" style="position: absolute; z-index:0; top: 0; left: 0;" width="100%"  loop="loop" autoplay="autoplay" src="Signin3D.mp4"></video></div>
			<div id="container"></div>
			<div id="info"></div>
			<div id="menu">
			    <button id="table" style="display: none">表格</button>
			    <button id="sphere" style="display: none">球球</button>
			    <button id="helix" style="display: none">螺旋</button>
			    <button id="grid" style="display: none">格子</button>
			</div>
			<div id="sign-staff" class="show_info animated" style="display:none;">
			    <div class="info_my">
			        <img/>
			        <div class="info_mem">
			        </div>
			    </div>
			    <p class="intro"></p>
			</div>
		</div>
		<!--弹幕留言-->
		<div class="g-cont"></div>
		<!--抽奖-->
		<div class="g-cont g-lottery">
			<div class="bgFixed"><video id="bgMov" style="position: absolute; z-index:0; top: 0; left: 0;" width="100%" loop="loop" autoplay="autoplay" src="lottery3d.mp4"></video></div>
			<div class="container none"></div>
			<div class="mask"></div>
			<!--<div id="stop" class="btn_circle none">停止</div>-->
			<div class="loader_file">
			    用户数据导入中 <span class="current_number"></span><span class="all_number"></span>
			</div>
			<div class="lucky_list clearfix">
	    <div class="left lucky_prize">
	        <div class="lucky_prize_box">
	            <button class="lucky_prize_left lucky_prize_direction"><</button>
	            <div data-default="1" class="lucky_prize_picture">
	                <img class="lucky_prize_show none"
	                     src="img/bXshiKc7Z2mQusImhSzC33czcBci3K.png"
	                     alt="一等奖笔记本"/>
	                <img class="none lucky_prize_show"
	                     src="img/szSy9dU21WZnSdGwP9tE533ntEd1WE.png"
	                     alt="二等奖平衡车"/>
	                <img class="none lucky_prize_show"
	                     src="img/gLz4H2xZ8XxkXlDDGdd8Fd2xF35kjX.png"
	                     alt="三等奖现金红包"/>
	            </div>
	            <button class="lucky_prize_right active lucky_prize_direction">></button>
	        </div>
	        <div class="lucky_prize_title">一等奖笔记本</div>
	        <div class="lucky_setting">
	            <span>
	                <b class="lucky_number">998</b>
	                人参与
	            </span>
	
	            <div class="select_box">
	                一次抽
	                <select name="select_lucky_number" class='select_lucky_number'>
	                    <option selected = "selected" value="1">1</option>
	                    <option value="2">2</option>
	                    <option value="3">3</option>
	                    <option value="4">4</option>
	                    <option value="5">5</option>
	                    <option value="10">10</option>
	                    <option value="20">20</option>
	                    <option value="30">30</option>
	                </select>
	                人
	            </div>
	        </div>
	        <div id="open" class="btn_circle btn_start">开始</div>
	    </div>
	    <div class="right lucky_people_list">
	        <div class="lucky_people_title">中奖名单</div>
	        <div class="lpl_list clearfix none">
	            <!--<div class="lpl_userInfo">-->
	            <!--<img class="lpl_userImage" src="http://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTK9YW8jiaJuo8xHZohXgpMpzVCWleDx4ko9zLn5B8iavAR2yQpeLMR5BQjf2jicwcGURXq5xf4yguwIQ/132"-->
	            <!--alt=""/>-->
	            <!--<p class="lpl_userName">小木姐姐</p>-->
	            <!--</div>-->
	        </div>
	        <div class="lpl_list clearfix none">
	
	        </div>
	        <div class="lpl_list clearfix none">
	
	        </div>
	    </div>
	</div>
		</div>
		<!--游戏，摇一摇-->
		<div class="g-cont">
			<div class="shakeSky"></div>
			<div class="shakeBuld"></div>
			<div class="shakeFloor"></div>
			<div class="shake-title"></div>
			<!--<div class="SecondRound"><div class="game_SecondRound_div">第        <span class="game_SecondRound">1</span>轮</div></div>-->
			<div class="readyNum">目前已加入人数： 101 人  ...</div>
			<!--<div class="">剩余时间：30S</div>-->
			<div class="shakeResult">结果</div>
			<div class="car car1">
				<!--<div class="des">
					<h3>第一名</h3>	
					<h4>二狗子</h2>
					<img src="img/b.png"/>
				</div>-->
				<div class="carImg">
					<img src="img/car1.png"/>
				</div>
			</div>
			<div class="car car2">
				<!--<div class="des">
					<h3>第一名</h3>	
					<h4>二狗子</h2>
					<img src="img/b.png"/>
				</div>-->
				<div class="carImg">
					<img src="img/car2.png"/>
				</div>
			</div>
			<div class="car car3">
				<!--<div class="des">
					<h3>第一名</h3>	
					<h4>二狗子</h2>
					<img src="img/b.png"/>
				</div>-->
				<div class="carImg">
					<img src="img/car3.png"/>
				</div>
			</div>
		</div>
	</div>
</body>
<!--在线抽奖引入-->
	<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src='js/transform.js'></script>
	<script type="text/javascript" src='js/tick.js'></script>
	<!--data为静态数据 如用ajax获取请取消输入引入-->
	<!--抽奖动画-->
	<script type="text/javascript" src='js/3d.js'></script>
	<!--实际抽奖逻辑代码-->
	<script type="text/javascript" src='js/lucky.js'></script>
	<!-- ajax抽奖逻辑 -->
	<!-- <script type="text/javascript" src='js/ajaxLucky.js'></script> -->
	<script type="text/javascript" src = "js/data.js"></script>
<!--抽奖引入结束-->

<!--特邀嘉宾-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.0/js/swiper.jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
				var mySwiper = new Swiper('.peopleBoxWrapper', {
				prevButton:'.swiper-button-prev',
				nextButton:'.swiper-button-next',	
			})
		})
	</script>
<!--特邀嘉宾引入结束-->

<!--签到引入开始-->
	<script src="https://threejs.org/build/three.js"></script>
	<script src="js/tween.min.js"></script>
	<script src="js/TrackballControls.js"></script>
	<script src="js/CSS3DRenderer.js"></script>
	<script src="js/quping.js"></script>
	<script src="js/siginMain.js" type="text/javascript" charset="utf-8"></script>
<!--签到引入结束-->

<!--弹幕引入开始-->
	<script src="js/barrageWall.js" type="text/javascript" charset="utf-8"></script>
<!--弹幕引入开始结束-->

<!--摇一摇游戏-->
	<script src="js/shakeMain.js" type="text/javascript" charset="utf-8"></script>

<!--底部导航js-->
	<script type="text/javascript">
		$(document).ready(function(){
			$(".g-footer").hover(function(){
				$(".g-footer").css('opacity','1')
			},function(){
				$(".g-footer").css('opacity','0.1')
			})
			$(".g-footer ul li ") .click(function(){
				var _index = $(this).index()
				//弹幕开关
				if(_index == 3){
					return
				} 
				//游戏开关
				$(".buttonForGame").css('opacity',0)
				if(_index == 5){
					$(".buttonForGame").css('opacity',1)
					//点击初始化
					shakeMain.init()
				}
				$(".g-cont").eq(_index).show().css('opacity','1').siblings().hide().css('opacity','0')
				$(this).addClass('active').siblings().removeClass('active')
			})
		})
	</script>
</html>